<template>
  <div class="page">
    <div class="rowOne">
      <div class="rowOneL">
        <div class="personalImg">
          <img :src="msg.imgUrl">
        </div>
        <div class="personalRes">
          <p class="name">
            <input type="text" v-model="val1" :readonly="name">
            <img :src="img1" alt="">
            <span @click="changeName" :class="{red:color1}">{{title1}}</span>
          </p>
          <p class="msg">
            <span>简介：</span>
            <input type="text" v-model="val2" :readonly="about">
            <img :src="img2" alt="">
            <span @click="changeAbout" :class="{red:color2}">{{title2}}</span>
          </p>
        </div>
      </div>
      <div class="rowOneR">
        <button><img src="../../assets/img/个人中心/切图/4.png">
          <span>联系客服</span>
        </button>
        <button @click="$router.push({path:'/view2/ctrl'})"><img src="../../assets/img/个人中心/切图/7.png">
          <span>进入收藏夹</span>
        </button>
        <p>服务热线：400-800-3683</p>
      </div>
    </div>
    <div class="rowTwo">
      <p>
        <img src="../../assets/img/个人中心/切图/8.png">
        <span>已获取方案
          <span>{{resultWayLen}}</span>
        </span>
      </p>
      <ul>
        <li v-for="(item,index) in resultWay" :key="index" @click="routeToWayDetail(index)">
          <button>方案{{index+1}}</button>
          <span>生成时间：{{item.startTime}}</span>
          <!-- <span>生成时间：{{item[1]}}</span> -->
          <img src="../../assets/img/个人中心/01.png" alt="" @click.stop="deleteWay(index)">
          <!-- <span class="deleteBtn" @click.stop="deleteWay(index)">x</span> -->
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
const imgOne = require("../../assets/img/个人中心/切图/1.png");
const imgTwo = require("../../assets/img/个人中心/01.png");
const img1 = require("../../assets/img/个人中心/切图/2.png");
const img2 = require("../../assets/img/个人中心/切图/3.png");
export default {
  data() {
    return {
      msg: {
        imgUrl: imgOne
      },
      project: [
        ["方案1", "2018-01-01", imgTwo],
        ["方案2", "2018-01-01", imgTwo],
        ["方案3", "2018-01-01", imgTwo],
        ["方案4", "2018-01-01", imgTwo]
      ],
      name: true,
      about: true,
      img1: img1,
      img2: img1,
      color1: false,
      color2: false,
      title1: "编辑",
      title2: "编辑",
      personal: "",
      result: "",
      val1: "",
      val2: "",
      resultWay: "",
      a: "",
      b: ""
    };
  },
  methods: {
    async deleteWay(index) {
      await this.$ajax
        .post(this.Ipurl + "aiInfo/delete?id=" + this.resultWay[index].id)
        .then(res => {
          if (res.data.returnCode == 1000) {
            this.$message.success("删除成功");
            this.loadWay()
          } else {
            this.$message.error("请稍后重试");
          }
        });
    },
    routeToWayDetail(index){
      this.$router.push({path:"/emitPlan",query:{id:this.resultWay[index].id}})
    },
    changeName() {
      if (this.title1 == "编辑") {
        this.title1 = "修改";
      } else {
        this.title1 = "编辑";
        this.$ajax
          .post(this.Ipurl + "user/update", {
            userId: JSON.parse(window.sessionStorage.getItem("userInfo"))
              .userId,
            username: this.val1
          })
          .then(res => {
            if (res.data.returnCode == 1000) {
              this.$message("用户名修改成功");
            } else {
              this.$message.error("sorry!请重试");
            }
          });
      }
      this.name = !this.name;
      this.color1 = !this.color1;
      if (this.img1 == img1) {
        this.img1 = img2;
      } else {
        this.img1 = img1;
      }
    },
    async changeAbout() {
      if (this.title2 == "编辑") {
        this.title2 = "修改";
      } else {
        this.title2 = "编辑";
       await this.$ajax
          .post(this.Ipurl + "user/update", {
            userId: JSON.parse(window.sessionStorage.getItem("userInfo"))
              .userId,
            about: this.val2
          })
          .then(res => {
            if (res.data.returnCode == 1000) {
              this.$message.success("简介修改成功");
            } else {
              this.$message.error("sorry!请重试");
            }
          });
      }
      this.about = !this.about;
      this.color2 = !this.color2;
      if (this.img2 == img1) {
        this.img2 = img2;
      } else {
        this.img2 = img1;
      }
    },
    async loadPersonal() {
      await this.$ajax
        .post(this.Ipurl + "user/getUserByPhone" + "?mobile=" + this.a)
        .then(res => {
          this.result = res.data.dataInfo;
          console.log(res.data.dataInfo)
          this.val1 = this.result.username;
          this.val2 = this.result.about;
        });
    },
    async loadWay() {
      await this.$ajax
        .post(this.Ipurl + "aiInfo/queryByUserId?userId=" + this.b)
        .then(res => {
          this.resultWay = res.data.dataInfo;
        });
    }
  },
  computed:{
    resultWayLen(){
      return '('+this.resultWay.length+')'
    }
  },
  mounted() {
    // 从本地存储读取用户的信息，防止刷新数据丢失,没有登录无法进入个人个人中心页面
    if (window.sessionStorage.getItem("userInfo")) {
      this.a = JSON.parse(window.sessionStorage.getItem("userInfo")).mobile;
      this.b = JSON.parse(window.sessionStorage.getItem("userInfo")).userId;
      // 读取用户信息
      this.loadPersonal();
      // 读取方案页
      this.loadWay();
    } else {
      // 没有登录直接跳往登录页面
      // this.$confirm("thank you，please login first", "a little error", {
      //   confirmButtonText: "前往登录",
      //   type: "warn"
      // }).then(() => {
      this.$router.push("/login");
      // });
    }
  }
};
</script>
<style scoped>
.page {
  width: 870px;
  margin-top: 80px;
  margin-left: 60px;
  overflow: hidden;
  float: left;
}
.rowOne {
  overflow: hidden;
  border-bottom: 1px solid gray;
}
.rowOneL {
  float: left;
}
.rowOneR {
  float: right;
}
.rowOneR > button {
  display: block;
  text-align: left;
  width: 140px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
}
.rowOneR > button:nth-child(2){
  background-color: #ee4041;
}
.rowOneR > p {
  font-size: 13px;
  color: rgb(201, 202, 205);
  margin-top: 20px;
  margin-bottom: 20px;
}
.rowOneR > button:nth-child(2) {
  margin-top: 20px;
}
.rowOneR > button > span {
  margin-left: 10px;
}
.rowOneR > button > img {
  margin-left: 20px;
  margin-top: -4px;
}
.personalImg {
  float: left;
}
.personalRes {
  float: left;
}
.personalRes > p {
  margin-left: 30px;
}
.name > input:nth-child(1) {
  font-size: 30px;
  color: rgb(34, 34, 34);
  font-weight: bold;
}
.name > img:nth-child(2) {
  margin-left: 26px;
}
.name > span:nth-child(3) {
  font-size: 14px;
  color: rgb(217, 210, 221);
  cursor: pointer;
}
.name > span:nth-child(3).red {
  color: rgb(237, 64, 64);
}
.msg {
  margin-top: 17px;
}
.msg > span:nth-child(1) {
  font-size: 16px;
  color: rgb(34, 34, 34);
}
.msg > input:nth-child(2) {
  font-size: 16px;
  color: rgb(34, 34, 34);
}
.msg > img:nth-child(3) {
  margin-left: 26px;
}
.msg > span:nth-child(4) {
  cursor: pointer;
  font-size: 14px;
  color: rgb(217, 210, 221);
}
.msg > span:nth-child(4).red {
  color: rgb(237, 64, 64);
}
input {
  max-width: 200px;
}
.rowTwo {
  margin-top: 40px;
}
.rowTwo > p {
  font-size: 18px;
  color: rgb(34, 34, 34);
}
.rowTwo > p > span {
  margin-left: 13px;
  font-weight: bold;
}
.rowTwo > p > span > span {
  color: rgb(237, 64, 64);
}
.rowTwo > ul {
  margin-top: 25px;
}
.rowTwo > ul > li {
  width: 434px;
  height: 94px;
  background: url("../../assets/img/个人中心/切图/11.png");
  float: left;
  cursor: pointer;
  position: relative;
}
.rowTwo > ul > li > button {
  font-size: 14px;
  color: #fff;
  border-radius: 15px;
  width: 100px;
  height: 26px;
  background: rgb(237, 64, 64);
  margin-top: 29px;
  margin-left: 66px;
}
.rowTwo > ul > li > span {
  margin-left: 20px;
  font-size: 14px;
  color: rgb(34, 34, 34);
}
.rowTwo > ul > li > img {
  margin-top: -29px;
  margin-left: 15px;
}

.rowOneR button:nth-child(1) {
  background-color: transparent;
  border: 1px solid #000;
}
.rowOneR button:nth-child(2) span{
  color: #fff;
}
</style>


